$.lp = {
    spots:{
        id:'',
        init: function(){
            
            $("#continents .leap_location").on("click",function(){
                var region = "region_"+$(this).attr("id").replace(" ","_");
                $("#continents").find(".leap_location_selected").removeClass('leap_location_selected');
                $(this).addClass('leap_location_selected');
                var top = $(this).offset().top - $(this).parents("#spotsWrapper").offset().top - 5;
                $("#lp-countries").find(".triange_region").show().css({"top":top+"px"});
                $("#lp-regions").find(".triange_region").hide();
                $(".countries").hide();
                $("#"+region).show();
                return false;
            });
            $(".countries .leap_location").on("click",function(){
                var region = "country_"+$(this).attr("region").replace(" ","_");
                $(".countries").find(".leap_location_selected").removeClass('leap_location_selected');
                $(this).addClass('leap_location_selected');
                var top = $(this).offset().top - $(this).parents("#spotsWrapper").offset().top - 5;
                $("#lp-regions").find(".triange_region").show().css({"top":top+"px"});
                $(".regions").hide();
                $("."+region).show();
                return false;
            });
            $('.scrollWrapper').bind('mousewheel', function(event, delta) {
                var dir = delta > 0 ? 'Up' : 'Down';
                var scroll = $(this).scrollTop(),scroll_val;
                if(dir == "Up")
                    scroll_val = scroll - 100
                else{
                    scroll_val = scroll + 100
                }
                $(this).scrollTop(scroll_val);
                return false;
            });
            $("#lp-countries").find('.up_a').on("click",function(){
                var scroll = $("#lp-countries").find('.scrollWrapper').scrollTop(),scroll_val;
                scroll_val = scroll - 65;
                $("#lp-countries").find('.scrollWrapper').animate({'scrollTop':scroll_val},200);
            });
            $("#lp-countries").find('.down_a').on("click",function(){
                var scroll = $("#lp-countries").find('.scrollWrapper').scrollTop(),scroll_val;
                scroll_val = scroll + 65;
                $("#lp-countries").find('.scrollWrapper').animate({'scrollTop':scroll_val},200);
            });
            $(".toggle_spot").on("click",function(){
                $(this).attr('class','toggle_spot_up');
                $("#sp-1").css({"height":"246px"});
                return false;
            });
            $(".toggle_spot_up").on("click",function(){
               $(this).attr('class','toggle_spot');
               $("#sp-1").css({"height":"0"});
               return false;
            });
            // ADD Spot
            $("#addSpot").on('click',function(){
                var template = $('#addSpot_template').html();
                var html = Mustache.to_html(template);
                $("body").append(html);
                $(".upload_overlay").show();
                $('.overlay_bg').show();
                return false;
            });
            $('.close_overlay').on('click',function(){
                $('.upload_overlay').remove();
                $('.overlay_bg').hide();
            });
            
            //leap Select-Box
            $(".lpDropdown-selected").on('click',function(){
                $(".lpOptions").hide();
                $(this).next().show();
            });
            $('html').click(function() {
                $(".lpOptions").hide();
            });
            $(".lpOptions").find("a").on('click',function(){
                $(this).parents("ul").prev().text($(this).text()).attr("id",$(this).text().toLowerCase().replace(" ","_"));
                $(this).parents(".lpOptions").hide();
                if($(this).parents('.lpDropdown').attr('id') === "dropdown-continent"){
                    $("#dropdown-countries").children(":first-child").attr("id","not-selected").text("Select a Country");
                    $("#dropdown-countries").show().find("li").hide();
                    $("#dropdown-countries").find("."+$(this).parents("ul").prev().attr('id')).show();
                }else if($(this).parents('.lpDropdown').attr('id') === "dropdown-countries"){
                    $("#dropdown-region").children(":first-child").attr("id","not-selected").text("Select a Region");
                    $.getJSON("/regions/getRegions?country="+$(this).text(), function(data){
                        var list = "";
                        $.each(data.country[0].regions,function(key,value){
                           list += "<li><a href='#'> "+value+"</a></li>" ;
                        });
                        $("#dropdown-region").show().find("ul").empty().append(list);
                    });
                    
                }
                return false;
            });
            //get spots
            $("#lp-regions").find('.regions').find('li').on('click',function(){
                $.getJSON('/spots/getSpotsByRegion?region='+$(this).attr('region'), function(data){
                       $.each(data.spots,function(key,value){
                           $('#lp-spots').find('.spots').empty().append('<li id='+value._id.$id+'>'+value.name+'</li>')
                       });
                });
            });
            //get spots infos
            $("#lp-spots").find('.spots').find('li').on('click',function(){
                $.getJSON('/spots/getSpotInfos?spotID='+$(this).attr('id'), function(data){
                       console.log(data);
                });
            });
            $("#addspot").on('click',function(){
               var name  = $(".addSpotWrapper").find("#name").val();
               var diff  = $(".addSpotWrapper").find("#dropdown-diff").find('.lpDropdown-selected').text();
               var creativity  = $(".addSpotWrapper").find("#dropdown-creativity").find('.lpDropdown-selected').text();
               var address  = $(".addSpotWrapper").find("#address").val();
               var access  = $(".addSpotWrapper").find("#dropdown-access").find('.lpDropdown-selected').text();
               var infos  = $(".addSpotWrapper").find("#infos").val();
               var continent = $("#dropdown-continent").find('.lpDropdown-selected').text().replace(' ','');
               var country = $("#dropdown-countries").find('.lpDropdown-selected').text().replace(' ','');
               var region = $("#dropdown-region").find('.lpDropdown-selected').text().replace(' ','');
               $.post("/spots/addSpot", {
                   name:name,
                   diff:diff,
                   creativity:creativity,
                   address:address,
                   access:access,
                   infos:infos,
                   continent:continent,
                   country:country,
                   region:region
               }, function(data){
                   if(data){
                       $.lp.spots.id = data;
                       $(".addSpotWrapper").remove();
                       $(".locationWrapper").remove();
                       $(".spotPictureWrapper").show();
                       $("#spots_helper").children(".selected").removeClass('selected');
                       $("#spots_helper").children(":last-child").addClass('selected');
                       createUploader(); 

                   }
               });
               return false;
            });
            $('#termsAccept').on('click',function(){
                $(".spotTerms").hide();
                $("#file-uploader").show();
                return false;
            });
        }
    }
}
function createUploader(){            
            var uploader = new qq.FileUploader({
                element: document.getElementById('file-uploader'),
                action: '/spots/upload_pics',
                debug: true,
                params:{id:$.lp.spots.id},
                onComplete:function(id, fileName, responseJSON){
                    if(responseJSON.success){
                        $('.upload_overlay').remove();
                        $('.overlay_bg').hide();
                    }
                }
            });           
        }
        
        // in your app create uploader as soon as the DOM is ready
        // don't wait for the window to load  
        
